<meta charset="UTF-8">
<style type="text/css">
    body,html{width:100%;height:100%;background:#000;padding:0;margin:0;overflow-x:hidden;overflow-y:hidden}
    *{margin:0;border:0;padding:0;text-decoration:none}
    #stats{position:fixed;top:5px;left:10px;font-size:12px;color:#fdfdfd;z-index:2147483647;text-shadow:1px 1px 1px #000, 1px 1px 1px #000}
    #dplayer{position:inherit}
</style>
<div id="dplayer"></div>
<div id="stats"></div>
<!-- hls -->
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- mp4 -->
<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest"></script>
<!-- dash -->
<!--<script src="https://cdn.dashjs.org/v3.1.3/dash.all.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/cdnbye-dash@latest"></script>-->
<script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
<script src="//cdn.jsdelivr.net/npm/mux.js@5.6.7/dist/mux.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/cbplayer2@latest"></script>
<!--<script src="../dist/CBPlayer.min.js"></script>-->

<script>
    var _peerId = '', _peerNum = 0, _totalP2PDownloaded = 0, _totalP2PUploaded = 0;
    const options = {
        container: document.getElementById('dplayer'),
        autoplay: true,
        video: {
            url: 'http://huya-w20.huya.com/2027/357649831/1300/e0a4cd303b58bab74f809be7f2d09113.mp4',
        },
        pluginOptions: {
            mp4: {
                p2pConfig: {
                    logLevel: 'debug',
                    // Other p2pConfig options provided by CDNBye
                }
            },
            dash: {
                p2pConfig: {
                    logLevel: 'debug',
                    // live: true,
                    // Other p2pConfig options provided by CDNBye
                }
            },
            hls: {
                p2pConfig: {
                    logLevel: 'debug',
                    // live: true,
                    // Other p2pConfig options provided by CDNBye
                    // https://docs.cdnbye.com/#/API
                }
            },
            shaka: {
                p2pConfig: {
                    logLevel: 'debug',
                    // segmentId: function (segmentUrl) {
                    //     return `${segmentUrl}`
                    // },
                    // live: true,
                    // Other p2pConfig options provided by CDNBye
                    // https://docs.cdnbye.com/#/API
                }
            }
        },
    };
    var dp = new CBPlayer(options);

    // switch to hls
    // setTimeout(() => {
    //     dp.switchVideo({
    //         url: 'https://www.nmgxwhz.com:65/20200107/17hTnjxI/index.m3u8',
    //     },)
    // }, 20000);

    // switch to dash
    // setTimeout(() => {
    //     dp.switchVideo({
    //         url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
    //     },)
    // }, 30000);

    setTimeout(() => {
        dp.destroy();
        options.video.url = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd'
        dp = new CBPlayer(options);
        // dp.switchVideo({
        //     url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
        // },)
    }, 30000);

    dp.on('stats', function (stats) {
        _totalP2PDownloaded = stats.totalP2PDownloaded;
        _totalP2PUploaded = stats.totalP2PUploaded;
        updateStats();
    })
    dp.on('peerId', function (peerId) {
        _peerId = peerId;
    })
    dp.on('peers', function (peers) {
        _peerNum = peers.length;
        updateStats();
    });

    function updateStats() {
        var text = 'Traffic offload ' + (_totalP2PDownloaded/1024).toFixed(2)
            + 'MB shared ' + (_totalP2PUploaded/1024).toFixed(2) + 'MB' + ' peers ' + _peerNum;
        document.getElementById('stats').innerText = text
    }


</script>
